<script setup>
import {ref, onMounted} from "vue";

const prop = defineProps({
  imgSrc: {
    type: String,
    default: ""
  },
  src: {
    type: String,
    default: ""
  },
  style: {
    type: Object,
  },
  imageStyle: {
    type: Object,
  },
  height: {
    type: String,
    default: ""
  },
  width: {
    type: String,
    default: ""
  },
  isArea: {
    type: Boolean,
    default: false
  },
  radius: {
    type: Number,
    default: 0
  },
  isimg: { // 是否是单个图片
    type: Boolean,
    default: false
  },
  imgMode: { // 图片模式
    type: String,
    default: 'widthFix'
  },
  showMenu: {
    type: String,
    default: ''
  }
})
onMounted(() => {
  // console.log('imgSrc=', prop.imgSrc)
})
const imageSrc = ref();
const isError = ref(false)
const getImage = (src) => {
  const sign = 'cachedNewImg#';
  const key = sign + src
  const _img = uni.getStorageSync(key)
  if (_img && !isError.value) {
    imageSrc.value = _img
  } else {
    isError.value = false;
    uni.getImageInfo({
      src: src,
      success: function (image) {
        // #ifdef H5
        uni.setStorageSync(key, image.path)
        imageSrc.value = image.path
        // #endif
        // #ifdef MP
        const fileSystemManager = uni.getFileSystemManager()
        fileSystemManager.saveFile({
          tempFilePath: image.path,
          success: function (res) {
            // console.log('RES--------------------------------IMG', res);
            uni.setStorageSync(key, res.savedFilePath)
            imageSrc.value = res.savedFilePath
          },
          fail: function (error) {
            // console.log('ERROR------------------------------IMG', error);
            imageSrc.value = src
          }
        })
        // #endif
        // #ifdef APP-PLUS
        uni.saveFile({
          tempFilePath: image.path,
          success: function (res) {
            uni.setStorageSync(key, res.savedFilePath)
            imageSrc.value = res.savedFilePath
          },
          fail: function (error) {
            // console.log('ERROR------------------------------IMG', error);
            imageSrc.value = src
          }
        })
        // #endif
      },
      fail: function (error) {
        // console.log('ERROR------------------------------IMG', error);
        imageSrc.value = src
      }
    });
  }
}
getImage(prop.imgSrc || prop.src)
const count = ref(0)
const errorLoad = (e) => {
  if (count.value === 0) {
    isError.value = true
    getImage(prop.imgSrc || prop.src)
  }
  count.value = 1
}
const loadSuc = (e) => {
  count.value = 0
}
</script>

<template>
  <image :show-loading="true" :src="imageSrc" :lazy-load="true" :fade="true" duration="450" v-if="src.length>0"
         :style="style" @error="errorLoad" @load="loadSuc">
  </image>
  <image :show-loading="true" :src="imageSrc" :lazy-load="true" :mode="imgMode" :fade="true" duration="450" v-if="isimg"
         :style="prop.imageStyle" @error="errorLoad" @load="loadSuc" show-menu-by-longpress="showMenu" class="onlyImg">
  </image>

  <up-image :show-loading="true" :src="imageSrc" :lazy-load="true" :fade="true" duration="450"
            v-else-if="height.length > 0 && width.length > 0"
            bg-color="#EFEFEF00" :width="width || '750rpx'" :height="height || '290px'" mode="scaleToFill"
            :radius="radius" @error="errorLoad" @load="loadSuc">
  </up-image>
  <up-image :show-loading="true" :src="imageSrc" :lazy-load="true" :fade="true" duration="450"
            v-else-if="width==='100%'"
            bg-color="#EFEFEF00" mode="scaleToFill" :width="'750rpx'" height="1800rpx" :radius="radius" @error="errorLoad"
            @load="loadSuc">
  </up-image>
  <up-image :show-loading="true" :src="imageSrc" :lazy-load="true" :fade="true" duration="450" v-else
            bg-color="#EFEFEF00" mode="scaleToFill" :radius="radius" @error="errorLoad" @load="loadSuc">
    <template v-slot:loading>
      <up-loading-icon color="#888888"></up-loading-icon>
    </template>
  </up-image>
</template>

<style scoped lang="scss">
</style>